<template>
	<view class="">
		<!-- <van-search @click-input="goSearch" placeholder="请输入搜索关键词" input-align="center" /> -->
		<nav-bar isBlack title="分类"></nav-bar>
		<view class="content">
			<van-sidebar v-model="curCate" >
				<van-sidebar-item v-for="(cate,ci) in categories" @click="getCateGoods(cate._id)" :key="'cate'+ci" :title="cate.name" />
			</van-sidebar>
			<view class="goods">
				<van-card v-for="(g,gi) in goods" :key="'goods'+gi" :price="g.price" :origin-price="g.pre_price"
					:desc="g.goods_desc" :title="g.name" :thumb="g.goods_thumb" @click="goDetail(g._id)">
					<template #tags>
						<van-tag v-for="(gt,gti) in g.keywords.split(',')" plain type="danger">{{gt}}</van-tag>
					</template>
					<template #footer>
						<view class="">
							<van-tag>
								库存:{{g.remain_count}}
							</van-tag>
							<van-tag>
								销量:{{g.month_sell_count}}/月
							</van-tag>
						</view>
					</template>
				</van-card>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<van-tabbar v-model="active" @change="onChange">
			<van-tabbar-item icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="search">分类</van-tabbar-item>
			<van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
			<van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	const Home = uniCloud.importObject('home');
	const GoodDb = uniCloud.importObject('goods-model');
	export default {
		setup() {
			const active = ref(1);
			const onChange = (index) => {
				console.log(index);
				let router = ['index', 'cate', 'cart', 'user']
				uni.reLaunch({
					url: `/pages/${router[index]}/index`
				})
			};
			const curCate = ref(0);
			// const cateChange = (index) => {}
			return {
				active,
				onChange,
				curCate,
				// cateChange
			};
		},
		data() {
			return {
				categories: []
			}
		},
		onLoad() {
			this.getCate()
		},
		methods: {
			// goSearch() {
			// 	uni.navigateTo({
			// 		url: "pages/goods/search"
			// 	})
			// },
			getCate() {
				Home.categories().then(res => {
					this.categories = res.data;
					this.getCateGoods(res.data[0]._id)
				})
			},
			getCateGoods(cate_id){
				// console.log(goods.cate_id);
				GoodDb.getGoodsByCate(cate_id).then(res=>{
					this.goods = res.data
				})
			}
		}
	}
</script>

<style>
	.content{
		display: flex;
	}
	.content .van-sidebar{
		width: 180upx;
	}
	.content .goods{
		width: 570upx;
	}
</style>
